<template>
    <div id="bmap" ref="canvas" class="canvas" :style="{width: '100%', height: canHeight+'px'}"></div>
</template>
<script setup lang="ts">
import { defineProps, computed, onMounted } from 'vue'
import { createPinia } from 'pinia'
import liaoning from '@/components/maps/map/json/province/liaoning.json'
import * as echarts from 'echarts/core';
import {
  TooltipComponent,
  type TooltipComponentOption,
  GeoComponent,
  type GeoComponentOption,
  LegendComponent,
  type LegendComponentOption,
  VisualMapComponent,
  type VisualMapComponentOption,
  GridComponent, 
  type GridComponentOption,
  MarkPointComponent,
  type MarkPointComponentOption,
  TitleComponent,
  type TitleComponentOption,
} from 'echarts/components';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { MapChart, type MapSeriesOption
 } from 'echarts/charts';
import { useChartsStore } from '@/stores/charts';
const pinia = createPinia();
const chartStore = useChartsStore(pinia)
echarts.use([
  TooltipComponent,
  GeoComponent,
  LegendComponent,
  CanvasRenderer,
  LabelLayout,
  VisualMapComponent,
  MapChart,
  GridComponent,
  MarkPointComponent,
  LegendComponent,
  TitleComponent,
]);

type EChartsOption = echarts.ComposeOption<
  | TooltipComponentOption
  | GeoComponentOption
  | LegendComponentOption
  | VisualMapComponentOption
  | MapSeriesOption
  | GridComponentOption
  | MarkPointComponentOption
  | LegendComponentOption
  | TitleComponentOption
>;
const props = defineProps({
    canvasHeight: {
        type:Number,
        default: 300
    },
    data: {
        type: Object,
        default: () => { } 
    }
})
let canHeight = computed(() => { return props.canvasHeight })

onMounted(() => {
    echarts.registerMap('liaoning', liaoning);
    var chartDom = document.getElementById('bmap')!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
        title: {
            show: false,
            text: '辽宁地图',
            textStyle: {
                fontSize: 16,
                color: '#ffffff'
            },
            left: 15
        },
        // color: chartStore.colors,
        // grid: { show: true, left: "0", right: "0", bottom: "0", top: "0", borderColor: "transparent" },
        legend: { show: true, textStyle: {color: '#fff'}},
        geo: {
            show: true,
            map: 'liaoning',
            roam: false,
            zoom: 1.2,
            nameMap: {'liaoning' : '辽宁'},
            legend: { show: true, textStyle: {color: '#fff'}},
            label: { show: false, color: '#a4a896'},
            itemStyle: {
                areaColor: '#0000ff60',
                borderColor: '#75786b',
                borderWidth: 2,
                borderType: 'dashed'
            },
            emphasis: {
                disabled: false,
                label: { show: true, color: '#ffffff', fontSize: 20,},
                itemStyle: {
                    areaColor: '#0e3c8b',
                    borderColor: '#2e74ea',
                    borderWidth: 4,
                    borderType: 'soild'
                },
            },
            left: 'center',
            top: '10%',
        },
        tooltip: {
            show: false,
            position: 'right',
            formatter: (param) => {
                return param.value ?  [param.name+"：",props.data[params.dataIndex].remark].join('\n') : null
            },
            backgroundColor: '#a2c1f6',
            borderColor: '#0e3c8b',
            borderWidth: 2,
            textStyle: { 
                color: 'blue',
                fontSize: 18,
                fontWeight: 600
            }
        },
        series: [
            {
                type: 'map',
                map: 'liaoning',
                geoIndex: 0,
                data: props.data
            },
            {
                type: 'effectScatter',
                colorBy: "data",
                coordinateSystem: 'geo', // 指定坐标系为地理坐标系
                effectType: 'ripple',
                showEffectOn: 'render',
                symbolSize: 16,
                // symbolOffset: ['-25', 0],
                label: {
                    show: true,
                    position: 'right',
                    fontSize: 14,
                    formatter: (params) => {
                        return params.name
                    }
                },
                data: props.data.map(m => {
                    m['value'] = m.pos
                    return m
                }),
                tooltip: {
                    show: true,
                    position: 'right',
                    formatter: (param) => {
                        return param.value ?  "地点："+param.name+"<br>"+props.data[param.dataIndex].remark: null
                    },
                    backgroundColor: '#a2c1f6',
                    borderColor: '#0e3c8b',
                    borderWidth: 2,
                    textStyle: { 
                        color: 'blue',
                        fontSize: 18,
                        fontWeight: 600
                    }
                },
            }
        ]
    };
    option && myChart.setOption(option); 

})
</script>

<style scope>
</style>